  <link type="text/css" href="css/jui/jquery-ui-1.8.11.custom.css" rel="stylesheet" /> 
  <link type="text/css" href="css/colorpicker/colorpicker.css" rel="stylesheet" />  
  <!--<link type="text/css" href="css/colorpicker/layout.css" rel="stylesheet" />-->
<style>

  #tabs li .ui-icon-close { float: left;  cursor: pointer; }
  #add_tab { cursor: pointer; }
  
  .panel{
background:#FFFFFF;
}
.pan_header{
//border: 1px solid #4297D7;
background: #0B615E 50% 50% repeat-x;
color: white;
font-weight: bold;
height:20px;
position: relative; 
}

.toggleA{
  width:16px;
  height:20px;
  float: left;
  position: relative; 
}

.saveA{
  width:16px;
  float: left;
  position: relative; 
	
}

.addA{
  width:16px;
  float: left;
  position: relative; 
	
}

.setting{
  width:100%;
  height:100%;
}
  </style>
  <script>
  $(function() {
      $('#colorSelector div').css('backgroundColor', '#' + '000000');
    $( ".toggle" ).click(function() {
	    if($(".toggle").hasClass("ui-icon-circle-triangle-n")){
	      $(".toggle").removeClass("ui-icon-circle-triangle-n");
	      $(".toggle").addClass("ui-icon-circle-triangle-s");
	    }else if($(".toggle").hasClass("ui-icon-circle-triangle-s")){
	      $(".toggle").removeClass("ui-icon-circle-triangle-s");
	      $(".toggle").addClass("ui-icon-circle-triangle-n");   
	    }
		$( ".setting" ).toggle( "blind" );
	    return false;
    }).mouseover(function(){
      $(".toggle").addClass("ui-state-hover");
    }).mouseleave(function(){
      $(".toggle").removeClass("ui-state-hover");
    });
    
	$(".save").mouseover(function(){
      $(".save").addClass("ui-state-hover");
    }).mouseleave(function(){
      $(".save").removeClass("ui-state-hover");
    }).click(function(){
    	wPanel.save();
    });
    
	$(".remove").mouseover(function(){
      $(".remove").addClass("ui-state-hover");
    }).mouseleave(function(){
      $(".remove").removeClass("ui-state-hover");
    });
    
	$(".add").mouseover(function(){
      $(".add").addClass("ui-state-hover");
    }).mouseleave(function(){
      $(".add").removeClass("ui-state-hover");
    });
    
  });
  </script>



<div class='pan_header draghandle'>
	<table>
		<td>
	    <a role="link" href="javascript:void(0)" class="ui-jqgrid-titlebar-close HeaderButton toggleA">
	      <div class="ui-icon ui-icon-circle-triangle-n toggle" ></div>
	    </a>
	    </td>
	    <td>
		<a role="link" href="javascript:void(0)" class="ui-jqgrid-titlebar-close HeaderButton saveA" alt='保存'>
	      <div class="ui-icon ui-icon-save save" ></div>
	    </a>
		</td>
	    <td>
		<a role="link" href="javascript:void(0)" class="ui-jqgrid-titlebar-close HeaderButton removeA">
	      <div class="ui-icon ui-icon-remove remove" ></div>
	    </a>
		</td>
	    <td>
		<a role="link" href="javascript:void(0)" class="ui-jqgrid-titlebar-close HeaderButton addA">
	      <div class="ui-icon ui-icon-add add" ></div>
	    </a>
	    </td>
	 </table>
</div>
<div class='setting'>

  <div id="tabs">
 
    <ul>
      
	</ul>
	<!--
    <div id="tabs-1">
    dddd
    </div>
	-->
  </div>

</div>
